<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title langWord="t:User_Info_Edit">User Info Edit</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../resources/css/mui.css">
		<link rel="stylesheet" href="../../resources/css/style.css">
		<link rel="stylesheet" href="../../resources/css/user/edit.css" />
		<script src="../../resources/assets/mui.js"></script>
		<script src="../../resources/assets/avalon.js"></script>
		<script src="../../resources/assets/mui.picker.min.js"></script>
		<script src="../../resources/assets/jquery-2.0.3.min.js"></script>
		<script src="../../resources/assets/jquery.cxselect.min.js"></script>
		<script src="../../resources/js/common.js"></script>
		<script src="../../resources/js/dahua.config.js"></script>
		<script src="../../resources/js/lang/en.js"></script>
		<script src="../../resources/js/user/edit.js"></script>
	</head>

	<body ms-controller="editPage">
		<!--头部-->
		<header class="mui-bar mui-bar-nav header">
			<h1 id="title" class="mui-title" langWord="t:User_Info_Edit">User Info Edit</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-icon-white"></a>
			<a class="mui-icon mui-pull-right mui-icon-white" href="../product/category.html">
				<i class="icon icon_home"></i>
			</a>
		</header>

		<div id="user-edit" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="mui-content-padded">
					<form :validate="@validate"  method="post" id="editForm">
						<input type="hidden" value="" id="uid" name="uid" />
						<div class="mui-row">
							<h5 langWord="t:User_Center_Company_Name">
								Company Name
							</h5>
							<div class="mui-input-row">
								<label>
									{companyName}
								</label>
							</div>
						</div>
						
						<!-- <div class="mui-row">
							<h5 langWord="t:User_Center_TAX_No">
								Tax No.
							</h5>
							<div class="mui-input-row">
								<label class="color-black">
									{taxNo}
								</label>
							</div>
						</div>
						

						<div class="mui-row">
							<h5>
								In Short
							</h5>
							<div class="mui-input-row">
								<input id="inShort" name="inshort" class="mui-input-clear" type="text" 
									ms-duplex="@inShort" ms-rules="{maxlength:50}" 
									data-maxlength-message="The in short must be less than 50 characters long!">
							</div>
						</div> -->

						

						<div class="mui-row">
							<h5>
								<span langWord="t:User_Center_Company_Type">Company Type</span>
								<sup>
									*
								</sup>
							</h5>
							<div class="mui-input-row">
								<select id="companyType" name="companyType" 
									ms-duplex="@companyType" ms-rules="{required: true}" 
									data-duplex-changed="chooseCompanyType"
									langWord="data-required-message:regsiter_message3" 
									data-required-message="The company type is required!">
									<option value="">
										Select a company type
									</option>
                                    <option value="Distributor">
                                        Distributor
                                    </option>
                                    <option value="Reseller">
                                        Reseller
                                    </option>
                                    <option value="System Integrator">
                                        System Integrator
                                    </option>
                                    <option value="Installer">
                                        Installer
                                    </option>
                                    <option value="End user">
                                        End user
                                    </option>
                                    <option value="Third Organization">
                                        Third Organization
                                    </option>
                                    <option value="Consultant">
                                        Consultant
                                    </option>
                                    <option value=" Manufacturer">
                                         Manufacturer
                                    </option>
								</select>
							</div>
						</div>
						
						<!-- <div class="mui-row mui-hidden"" id="i_others">
						<h5></h5>
						<div class="mui-input-row">
							<input id="others_industry" name="others_industry" type="text" class="mui-input-clear" 
								ms-duplex="@othersIndustry" ms-rules="{othersIndustry:true}">
						</div>
					</div> -->
						
						<div class="mui-row">
							<h5>
								<span langWord="t:User_Center_Email">Email</span>
						<sup>
							*
						</sup>
							</h5>
							<div class="mui-input-row">
								
								<label>
									{email}
								</label>
								
								
							</div>
						</div>
						
						
						<div id="locations">
							<div class="mui-row">
								<h5>
								<span langWord="t:User_Center_Region">Region:</span>
								<sup>*</sup>
							</h5>
								<div class="mui-input-row">
									<select langWord="data-required-message:regsiter_message9" id="region" name="regionLocation.id" class="mui-select region" 
										ms-duplex="@region" ms-rules="{required: true}" 
										ms-attr="{'data-value': @region}"
										data-required-message="The region is required!"></select>
								</div>
							</div>

							<div class="mui-row">
								<h5>
								<span langWord="t:User_Center_Country">Country</span>:
								<sup>*</sup>
							</h5>
								<div class="mui-input-row">
									<select langWord="data-required-message:regsiter_message10" id="country" name="countryLocation.id" class="mui-select country" 
										ms-duplex="@country" ms-rules="{required: true}" 
										ms-attr="{'data-value': @country}"
										data-required-message="The country is required!">
									</select>
								</div>
							</div>

							<div class="mui-row">
								<h5>
									<span langWord="t:User_Center_StateProvince">State/Province</span>
									<sup>
									*
								</sup>
								</h5>
								<div class="mui-input-row">
									<select langWord="data-required-message:regsiter_message11" id="state" name="stateLocation.id" class="mui-select state"
										ms-duplex="@state" ms-attr="{'data-value': @state}">
									</select>
								</div>
							</div>
							<div class="mui-row">
								<h5>
									<span langWord="t:User_Info_Edit_city">City</span>
									<sup id="city_sup">
									*
								</sup>
								</h5>
								<div class="mui-input-row">
									<select langWord="data-required-message:regsiter_message12" id="city" type="text" class="mui-select city" name="cityLocation.id" ms-duplex="@city" ms-rules="{required: false}" ms-attr="{'data-value': @city}"
										data-required-message="The city is required!" >
									</select>
								</div>
							</div>
						</div>
						<div class="mui-row" id="postcodeDiv" style="display:none;">
							<h5>
								<span langWord="t:User_Center_Postcode">Postcode</span>
								<sup>
								*
							</sup>
							</h5>
							<div class="mui-input-row">
								<input langWord="data-postcodeV-message:regsiter_message13 data-maxlength-message:regsiter_message14" id="postcode" name="postcode" type="text" class="mui-input-clear" ms-duplex="@postcode" 
									ms-rules="{postcodeV: true,maxlength:50}" data-postcodeV-message="The postcode is required!" data-maxlength-message="The first name must be less than 50 characters long!">
							</div>
						</div>
						<div class="mui-row">
							<span langWord="t:User_Center_Address">Address</span>
							<!-- <sup>
								*
							</sup> -->
							<div class="mui-input-row">
								<textarea langWord="data-maxlength-message:regsiter_message15" id="detailAddress" name="detailAddress" rows="3" 
									ms-duplex="@detailAddress" ms-rules="{maxlength:256}"
									data-maxlength-message="The detail address must be  less than 256 characters long!">
								</textarea>
							</div>
						</div>
						
						<!-- <div class="mui-row">
							<h5>
								Contact
								<sup>
									*
								</sup>
							</h5>
							<div class="mui-input-row">
								<input id="contact" name="contact" class="mui-input-clear" type="text" 
									ms-duplex="@contact"  ms-rules="{required: true,maxlength:50}" 
									data-required-message="The contact is required!"
									data-maxlength-message="The contact must be  less than 50 characters long!">
							</div>
						</div>
						
						<div class="mui-row">
							<h5>
								Job Title
							</h5>
							<div class="mui-input-row">
								<input id="jobTitle" name="jobTitle" class="mui-input-clear" type="text" 
									ms-duplex="@jobTitle"  ms-rules="{maxlength:50}" 
									data-maxlength-message="The job title must be  less than 50 characters long!">
							</div>
						</div> -->
						<div class="mui-row">
							<h5>
								<span langWord="t:User_Center_First_name">First name</span>
								<!--<sup>
								*
							</sup>-->
							</h5>
							<div class="mui-input-row">
								<input langWord="data-required-message:regsiter_message16 data-maxlength-message:regsiter_message17" id="firstName" name="firstName" type="text" class="mui-input-clear" ms-duplex="@firstName" 
								ms-rules="{maxlength:30}" data-maxlength-message="The first name must be less than 30 characters long!">
							</div>
						</div>
						
						<div class="mui-row">
							<h5>
								<span langWord="t:User_Center_Last_name">Last name</span>
								<!--<sup>
								*
							</sup>-->
							</h5>
							<div class="mui-input-row">
								<input langWord="data-required-messageregsiter_message18 data-maxlength-message:regsiter_message19" id="lastName" name="lastName" type="text" class="mui-input-clear" ms-duplex="@lastName" 
								ms-rules="{maxlength:30}" data-maxlength-message="The last name must be less than 30 characters long!">
							</div>
						</div>
						<div class="mui-row">
							<h5 langWord="t:User_Center_TAX_No">
								Tax No.
							</h5>
							<div class="mui-input-row">
								<label class="color-black">
									{taxNo}
								</label>
							</div>
						</div>
						<div class="mui-row">
							<h5>
								<span langWord="t:User_Info_Edit_phone">Phone</span>
								<sup>
									*
								</sup>
							</h5>
							<div class="mui-input-row">
								<div class="mui-row">
									<div class="mui-col-xs-3">
										<select style="width: 95%;" name="telCode" id="telCode"
											langWord="data-required-message:regsiter_message22"
											ms-duplex="@telCode"
											data-required-message="The country code is required!" 
											 ms-rules="{required: true}" >
											<option ms-for='(i,code) in @codes'>{code}</option>
										</select>
									</div>
							
									<div class="mui-col-xs-9">
										<input langWord="data-required-message:regsiter_message23 data-maxlength-message:regsiter_message24" id="contact" name="telNo" class="mui-input-clear" type="text" 
											ms-duplex="@telNo" ms-rules="{required: true,maxlength:20}" 
											data-required-message="The Tel. No. is required!" 
											data-maxlength-message="The telephone number must be  less than 20 characters long!">
									</div>
							
								</div>
							</div>
						</div>
						
						
						<!-- <div class="mui-row">
							<h5>
								Existing Distributor
							</h5>
							<div class="mui-input-row">
								<input id="existingDistributor" name="existingDistributor" class="mui-input-clear" type="text" 
									ms-duplex="@existingDistributor"  ms-rules="{maxlength:50}" 
									data-maxlength-message="The job title must be  less than 50 characters long!">
							</div>
						</div>
						
						
						<div class="mui-row">
							<h5>
								Preferred Distributor
							</h5>
							<div class="mui-input-row">
								<input id="preferredDistributor" name="preferredDistributor" class="mui-input-clear" type="text" 
									ms-duplex="@preferredDistributor"  ms-rules="{maxlength:50}" 
									data-maxlength-message="The preferred distributor must be  less than 50 characters long!">
							</div>
						</div>
						
						
						<div class="mui-row">
							<h5>
								Company Size
								<sup>
									*
								</sup>
							</h5>
							<div class="mui-input-row">
								<select id="companySize" name="companySize" 
									ms-duplex="@companySize" ms-rules="{required: true}" 
									data-required-message="The company size is required!">
									<option value="">
										Select a company size
									</option>
									<option value="1-10">
										1-10
									</option>
									<option value="10-50">
										10-50
									</option>
									<option value="50-100">
										50-100
									</option>
									<option value="More than 100">
										More than 100
									</option>
								</select>
							</div>
						</div>
						
						
						
						<div class="mui-row">
							<h5>
								Company Website
							</h5>
							<div class="mui-input-row">
								<input id="companyWebSite" name="companyWebSite" class="mui-input-clear" type="text" 
									ms-duplex="@companyWebsite"  ms-rules="{maxlength:50}" 
									data-maxlength-message="The company website must be less than 50 characters long!">
							</div>
						</div>
						
						
						<div class="mui-row">
							<h5>
								Average Annual Purchase in Security Related(USD)
							</h5>
							<div class="mui-input-row">
								<input id="aapisr" name="AAPISR" class="mui-input-clear" type="text" 
									ms-duplex="@aapisr"  ms-rules="{maxlength:50}" 
									data-maxlength-message="The Average Annual Purchase in Security Related website must be less than 50 characters long!">
							</div>
						</div>
						
					
						<div class="mui-row">
							<h5>
								Remark
							</h5>
							<div class="mui-input-row">
								<textarea id="remark" name="remark" rows="3" 
									ms-duplex="@remark" ms-rules="{maxlength:1024}" 
									data-max-message="The remark must be less than 1024 characters long!">
								</textarea>
							</div>
						</div> -->
						
						

						<div class="mui-button-row">
							<button id="save" type="button" :click="@edit" class="mui-btn mui-btn-update">
							 <i class="iconSubmit"></i><span langWord="t:User_Center_Save">Save</span>
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		
	</body>

</html>
